<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>地图框选</title>
    <script src="https://openlayers.org/en/v4.5.0/build/ol.js" type="text/javascript"></script>
</head>
<body>
<div id="map"></div>
<script>

    var map = new ol.Map({
        layers: [
            new ol.layer.Vector({
                //这是一个能选择的地图源
                source: new ol.source.Vector({
                    url: 'https://openlayers.org/en/v4.1.1/examples/data/geojson/countries.geojson',
                    format: new ol.format.GeoJSON()
                })
            })
        ],
        interactions:[//交互
            new ol.interaction.Select(),//选择
            new ol.interaction.DragBox({
                condition: ol.events.condition.platformModifierKeyOnly
            })//画框
        ],
        target: 'map',
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        })
    });
</script>
</body>
</html>